﻿
@{
    ViewData["Title"] = "RecreationShows";

}

<h3 style="margin-left:60px;color:darkgoldenrod">娱乐项目列表</h3>

<script src="~/js/vue.min.js"></script>
<script src="~/js/axios.min.js"></script>
<script src="~/js/qs.min.js"></script>
<link href="~/js/Content/bootstrap.css" rel="stylesheet" />
<style type="text/css">
    tr.change:hover {
        background-color: #00FF00
    }
</style>
<div id="tm">
    <input style="margin-left:60px" type="text" v-model="queryModel.name" />
    <input type="button" style="width: 60px; color: forestgreen; background-color: burlywood; border: 1px solid; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 5px" value="查询" v-on:click="queryUser" />
    <input type="button" style="margin-left:60px;width: 80px; color: forestgreen; background-color: burlywood; border: 1px solid; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 5px" value="新增娱乐" onclick="Tiao()" />
    <div>
        <table class="table table-bordered" style="width:1000px;margin: auto;text-align: center; margin-top:10px">
            <tr class="change" style="background-color:cadetblue">
                <td>活动名称</td>
                <td>收费标准</td>
                <td>开始时间</td>
                <td>结束时间</td>
                <td>负责人</td>
                <td>状态</td>
                <td>备注</td>
                <td>操作</td>
            </tr>

            <tr class="change" v-for="item in users">
                <td>{{item.aname}}</td>
                <td><span style="color:red">￥{{item.aprice}}.00</span>元/小时</td>
                <td>{{item.rkaiTime | formatTime('yyyy年MM月dd日')}}</td>
                <td>{{item.rjieTime | formatTime1('yyyy年MM月dd日')}}</td>
                <td>{{item.rprincipal}}</td>
                <td>{{item.rstate==1?"已开启":"未开启"}}</td>
                <td>{{item.acomment}}</td>
                <td>
                    <input type="button" style="width: 80px; color:black; background-color:aqua; border: 1px solid; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 5px" v-on:click="DelRecrea(item.rid)" value="删除" />
                    <input type="button" style="margin-left:12px;width: 80px; color:black; background-color:darkgrey; border: 1px solid; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 5px" v-on:click="Find(item.rid)" value="修改 | 添加" />
                </td>
            </tr>

        </table>

    </div>
</div>
@*<div id="tm" style="background-color:aqua">
        <nav style="float:right;">
            <ul class="pagination pagination-lg">
                <template v-for="page in Math.ceil(Relut.length/pagesize)">
                    <li v-on:click="PrePage()" id="prepage" v-if="page==1" class="disabled"><a href="#">上一页</a></li>
                    <li v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
                    <li v-else v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
                    <li id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(Relut.length/pagesize)"><a href="#">下一页</a></li>
                </template>
            </ul>
        </nav>
    </div>*@

<script>
    //显示娱乐列表
    new Vue({
        el: '#tm',
        data() {
            return {
                users: [],
                queryModel: {
                    name: "",
                },
                id: 0,
                pages: 10,
                pagesize: 6,
                curpage: 1,


            }

        },
        mounted: function () {//页面加载成功事件
            axios
                .get("/Recreation/RecreationShow")
                .then(res => (this.users = res.data))
        },
        methods: {
            //查询的方法
            queryUser: function () {
                axios
                    .get("/Recreation/RecreationShow", {
                        params: this.queryModel
                    })
                    .then(res => (this.users = res.data));
            },
            //删除的方法
            DelRecrea: function (rid) {
                this.id = rid;
                axios
                    .get("/Recreation/Del", {
                        params: {
                            id: this.id
                        }
                    })
                    .then(
                        function (i) {
                            if (i.data > 0) {
                                alert("删除成功！");
                                location.href = '/Recreation/RecreationShows'
                            }
                            else {
                                alert("删除失败");
                            }
                        }
                    );

            }


        },


        ////上一页方法
        //PrePage: function (event) {
        //    $(".pagination .active").prev().trigger("click");
        //},
        ////下一页方法
        //NextPage: function (event) {
        //    $(".pagination .active").next().trigger("click");
        //},
        ////点击页码的方法
        //NumPage: function (num, event) {
        //    if (this.curpage == num) {
        //        return;
        //    }
        //    this.curpage = num;
        //    $(".pagination li").removeClass("active");
        //    if (event.target.tagName.toUpperCase() == "LI") {
        //        $(event.target).addClass("active");
        //    }
        //    else {
        //        $(event.target).parent().addClass("active");
        //    }
        //    if (this.curpage == 1) {
        //        $("#prepage").addClass("disabled");
        //    }
        //    else {
        //        $("#prepage").removeClass("disabled");
        //    }
        //    if (this.curpage == Math.ceil(this.Relut.length / this.pagesize)) {
        //        $("#nextpage").addClass("disabled");
        //    }
        //    else {
        //        $("#nextpage").removeClass("disabled");
        //    }
        //},

        //时间转换
        filters: {
            formatTime: function (date, fmt) {
                var date = new Date(date);
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                var o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (var k in o) {
                    if (new RegExp('(' + k + ')').test(fmt)) {
                        var str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
                    }
                }
                return fmt;
            },
            formatTime1: function (date, fmt) {
                var date = new Date(date);
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                var o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (var k in o) {
                    if (new RegExp('(' + k + ')').test(fmt)) {
                        var str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
                    }
                }
                return fmt;
            }
        }

    })
    //添加跳转
    function Tiao() {
        location.href = '/Recreation/AddAmusementview'
    }
    //修改跳转
    function Find(rid) {

        location.href = '/Recreation/UptRecreationView?id=' + rid;
    }
</script>
